<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安全管理门户</title>
    <link rel="stylesheet" href="./static/css/index.css">
    <link rel="stylesheet" href="./static/css/style.css">
</head>
<body>
    <div id="app" style="display:none" v-show="true" v-cloak class="container">
        <!-- top start -->
        <div class="top">
            <div class="top_one">
                <div class="top_one_one">
                    <img src="./static/img/tongchuan.png" >
                    <span>安全管理门户</span>
                </div>
                <hr/>
                <div class="top_one_two">
                    <div class="top_one_two_con">
                        <div class="top_one_two_con_one">
                            <img src="./static/img/zichan.png" width="24px" height="26px">
                        </div>
                        <div class="top_one_two_con_two">
                            <p><strong>7</strong></p>
                            <span>资产总数</span>
                        </div>
                    </div>
                    <div class="top_one_two_con">
                        <div class="top_one_two_con_one">
                            <img src="./static/img/huojian.png" width="26.02px" height="32.24px">
                        </div>
                        <div class="top_one_two_con_two">
                            <p><strong>365天</strong></p>
                            <span>系统服务时间</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top_two">
                <p class="top_two_one">安全系统监控</p>
                <p class="top_two_two">
                    <span>
                        安全监测分析系统通过对不同的日志及流量数据进行采集，清洗范式化后分布式存储空间的数据为数据检索和展示的提供支撑。
                    </span>
                </p>
            </div>
            <div class="top_three">
                <p class="top_three_one">安全监测分析系统</p>
            </div>
            <div class="top_four">
                <p class="top_four_one">运行和服务安全管理系统</p>
            </div>
            <div class="top_five">
                <p class="top_five_one">周一 2020-10-10 14:43</p>
                <p class="top_five_two"><strong>[统计周期为最近7天]</strong></p>
            </div>
        </div>
        <!-- top end -->
        <!-- middle start -->
        <div class="middle">
            <div class="middle_one">
                <p class="title"> <strong>脆弱资产<span>TOP10</span></strong></p>
                <hr class="hr_btm"/>
                <p class="middle_one_one">
                   <span class="span_one">10.64.211.14</span>
                   <span class="span_two">脆弱性风险20个</span>
                   <span class="span_three">未处理</span>
                </p>
                <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
                 <p class="middle_one_one">
                    <span class="span_one">10.64.211.14</span>
                    <span class="span_two">脆弱性风险20个</span>
                    <span class="span_three">未处理</span>
                 </p>
            </div>
            <div class="middle_two">
                <div class="middle_two_one">
                    <div class="small_circle">
                        <img src="./static/img/zhuanjuan.png" width="86px" height="86px">
                        <p>
                            31
                        </p>
                        <span>
                           漏洞风险
                        </span>
                    </div>
                    
                    <div class="small_circle">
                        <img src="./static/img/zhuanjuan.png" width="86px" height="86px">
                        <p>
                            1
                        </p>
                        <span>
                            弱密码
                        </span>
                    </div>
                </div>
                <div class="middle_two_two">
                    <div class="max_circle">
                        <img src="./static/img/xuanzhuan1.png" width="349px" height="349px" class="img_one">
                        <img src="./static/img/saomiao.png" class="img_two">
                        <p>58</p>
                        <span>
                            脆弱性风险
                        </span>
                    </div>
                </div>
                <div class="middle_two_one">
                    <div class="small_circle">
                        <img src="./static/img/zhuanjuan.png" width="86px" height="86px">
                        <p>
                            2
                        </p>
                        <span>
                            WEB明文传输
                        </span>
                    </div>
                    <div class="small_circle">
                        <img src="./static/img/zhuanjuan.png" width="86px" height="86px">
                        <p>
                            10
                        </p>
                        <span>
                            高危安全事件
                        </span>
                    </div>
                </div>
            </div>
            <div class="middle_three">
                <div class="middle_three_one">
                    <p class="title"> <strong>漏洞风险态势</strong></p>
                    <hr/>
                    <div id="ldfx" style="height: 140px;">

                    </div>
                </div>
                <div class="middle_three_two">
                    <p class="title"> <strong>弱密码</strong></p>
                    <hr>
                    <div id="rmm" style="height: 150px;margin-top: 5px;border: 1px solid #147896;">

                    </div>
                </div>
            </div>
        </div>
        <!-- middle end -->
        <!-- bottom start -->
        <div class="bottom">
            <div class="bottom_one bg_pub">
                <p class="title">
                    <strong>实时性脆弱性检测</strong>
                </p>
                <hr class="hr_btm"/>
                <p class="bottom_one_title">
                    <span>名称</span>
                    <span>关键字</span>
                    <span>IP</span>
                    <span>状态</span>
                    <span class="date_span">开始日期</span>
                    <span>详情</span>
                </p>
                <p class="bottom_one_content">
                    <span>数据库弱密码风险</span>
                    <span>SMT 登录弱密码</span>
                    <span>10.64.211.14</span>
                    <span class="active_text">待处理</span>
                    <span class="date_span">2020-11-26 16:13:14</span>
                    <span>脆弱性风险</span>
                </p>
                <p class="bottom_one_content">
                    <span>数据库弱密码风险</span>
                    <span>SMT 登录弱密码</span>
                    <span>10.64.211.14</span>
                    <span class="active_text">待处理</span>
                    <span class="date_span">2020-11-26 16:13:14</span>
                    <span>脆弱性风险</span>
                </p>
                <p class="bottom_one_content">
                    <span>数据库弱密码风险</span>
                    <span>SMT 登录弱密码</span>
                    <span>10.64.211.14</span>
                    <span class="active_text">待处理</span>
                    <span class="date_span">2020-11-26 16:13:14</span>
                    <span>脆弱性风险</span>
                </p>
                <p class="bottom_one_content">
                    <span>数据库弱密码风险</span>
                    <span>SMT 登录弱密码</span>
                    <span>10.64.211.14</span>
                    <span class="active_text">待处理</span>
                    <span class="date_span">2020-11-26 16:13:14</span>
                    <span>脆弱性风险</span>
                </p>
                <p class="bottom_one_content">
                    <span>数据库弱密码风险</span>
                    <span>SMT 登录弱密码</span>
                    <span>10.64.211.14</span>
                    <span class="active_text">待处理</span>
                    <span class="date_span">2020-11-26 16:13:14</span>
                    <span>脆弱性风险</span>
                </p>
            </div>
            <div class="bottom_two bg_pub">
                <p class="title"> <strong>高危安全事件<span>TOP5</span></strong></p>
                <hr class="hr_btm"/>
                <p class="bottom_two_title pingfen">
                    <span class="flex_2">名称</span>
                    <span class="flex_1">总数</span>
                    <span class="flex_1">IP</span>
                </p>
                <p class="pingfen">
                    <span class="flex_2 text_surplus_hide">数据库弱密码风险数据库弱密码风险数据库弱密码风险</span>
                    <span class="flex_1">12</span>
                    <span class="flex_1">192.168.0.1</span>
                </p>
                <p class="pingfen">
                    <span class="flex_2 text_surplus_hide">数据库弱密码风险数据库弱密码风险数据库弱密码风险</span>
                    <span class="flex_1">12</span>
                    <span class="flex_1">192.168.0.1</span>
                </p>
                <p class="pingfen">
                    <span class="flex_2 text_surplus_hide">数据库弱密码风险数据库弱密码风险数据库弱密码风险</span>
                    <span class="flex_1">12</span>
                    <span class="flex_1">192.168.0.1</span>
                </p>
                <p class="pingfen">
                    <span class="flex_2 text_surplus_hide">数据库弱密码风险数据库弱密码风险数据库弱密码风险</span>
                    <span class="flex_1">12</span>
                    <span class="flex_1">192.168.0.1</span>
                </p>
                <p class="pingfen">
                    <span class="flex_2 text_surplus_hide">数据库弱密码风险数据库弱密码风险数据库弱密码风险</span>
                    <span class="flex_1">12</span>
                    <span class="flex_1">192.168.0.1</span>
                </p>
            </div>
            <div class="bottom_three bg_pub">
                <p class="title"> <strong>web明文传输</strong></p>
                <hr/>
                <div id="webming" style="height: 230px;">

                </div>
            </div>
        </div>
        <!-- bottom end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"  type="text/javascript"></script>
    <script src="./static/js/echarts.min.js" type="text/javascript"></script>
    <script src="./static/js/loudong.js" type="text/javascript" ></script>
    <script src="./static/js/ruomima.js" type="text/javascript" ></script>
    <script src="./static/js/webming.js" type="text/javascript" ></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {},
            created(){
               console.log('创建完成');
            },
            mounted() {
                console.log('挂载完成');
                setEchartsLou('ldfx');
                setEchartsRuo('rmm',
                [
                    { value: 10, name: '弱密码类型FTP' },
                    { value: 30, name: '弱密码类型LDAP' },
                    { value: 50, name: '弱密码类型MYSQL' },
                    { value: 20, name: '弱密码类型POP3' },
                    { value: 30, name: '弱密码类型SMTP' },
                ],
                [
                    '#0DFCFF','#0FCFFF','#0F6CED','#FFE054','#FFA857'
                ]);
                setEchartsWeb('webming');
            }
        })
    </script>
</body>
</html>
